<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            width: 100px;
            height: 100px;
            background-color: skyblue;

            position: absolute;
            left: 206px;
            top: 150px;
            opacity: 1;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div>

    </div>
    <script>
        var div = document.querySelector('div');
         // 我们想获取什么时候结束了 
         // 定时器是异步的 
         // left top width boderRadius 会各自开一个定是器 
         //每个样式结束 各自关闭定时器  
         // 因为异步 所以 捕捉不到什么时候结束了


        //  解决方案

        // 创建一个计数器  
        // 每次遍历对象的时候 开启一个定时器  
        // obj 第一个是left 第二个是top 第三个是width 第四个是height
        // 当left 开启定时器  计数器+1 
        // left 到达目标 结束定时器 计数器-1

        // fn 开始的时候 不调用  
        // 运动结束才调用 


        // 这种函数叫做回调 
         function sport(ele,obj,fn = ()=>{}) {
            //  计数器
            let count = 0;
            for(let key in obj){
                count++;
                const types = key;
                let target = obj[key]; 
                // const 导致target 不能修改  
                // left top width height opacity 就没办法设置 
                // var target 是个全局变量  
                // 最后拿到的目标值也成了所有的目标值 

                // let 有作用域 各自拿各自的 
                if (types === 'opacity') {
                        target *= 100;
                }
                var timer = setInterval(() => {


                        // 每次运动重新获取以此元素的left值
                        // 如果是opacity 当前的结果也要乘以100
                        var init;
                        if (types == 'opacity') {
                            init = window.getComputedStyle(ele)[types] * 100;
                        } else {
                            init = parseInt(window.getComputedStyle(ele)[types]);
                        }

                        // 定义一个变量 存放每次的运动距离  
                        var duration = (target - init) / 10;

                        duration = duration > 0 ? Math.ceil(duration) : Math.floor(duration);
                        // 判断是否达到目标
                        if (init === target) {
                            clearInterval(timer);
                            count--;
                            if(count == 0){
                                // console.log('完全结束');
                                // alert(1+1);
                                console.log('结束了');
                                //在这里 让用户决定做什么
                                fn();
                            }
                        } else {
                            if (types === 'opacity') {
                                ele.style[types] = (init + duration) / 100;

                            } else {
                                ele.style[types] = init + duration + 'px';
                            }

                        }

                    }, 10)
            }

        }

        div.onclick = function () {
            sport(div, {
                
            
                left: 500,
                top: 500,
                opacity: 0.5,
                borderRadius: 50,
                
            },()=>console.log('终于解放了威少终于不再被骂了'));
        }

    </script>
</body>
</html>